<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title></title>
<style>
.g-vd-tooltip{position:absolute;margin-top:-25px;filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=3);visibility:hidden;}
.g-vd-tooltip q{display:block;border:#F00 1px solid;padding:2px 3px;white-space:nowrap;font-size:12px;background-color:#FFF;
-moz-box-shadow: 2px 2px 4px #CCC;}
.g-vd-tooltip i{display:block;width:14px;height:7px;background:url(imgs/ico_vdt.gif) no-repeat;margin-top:-1px;overflow:hidden;margin-left:10px;}
.g-vd-tooltip.g-vd-error{visibility:visible;color:#F00;}
.g-vd-tooltip.g-vd-prompt{visibility:visible;color:#009900;}
.g-vd-tooltip.g-vd-prompt q{border:#009900 1px solid;}
.g-vd-tooltip.g-vd-prompt i{background-position:-16px 0;}

.g-vd-status{width:15px;height:15px;display:inline-block;*display:inline;zoom:1;overflow:hidden; background-color:#FF0000;margin-left:5px;vertical-align:middle; visibility:hidden;background:url(imgs/ico_vdt.gif) no-repeat;}
.g-vd-status.g-vd-s-error{visibility:visible;background-position:-15px -10px;}
.g-vd-status.g-vd-s-pass{visibility:visible;background-position:0 -10px;}
.g-no-status .g-vd-status{display:none;}
</style>
</head>

<body>
<div id="validator_form" validate="{'rules':{'username':{'required':1,'rangeLength':[2,4]},'userage':{'required':1,'range':[18,80]}},'onblur':true,'errorMessages':{'username':{'required':'请输入姓名','rangeLength':'姓名长度在2-4个字符'}}}">
    <p></p>
    <table width="100%" border="1">
        <tr>
            <th width="9%" scope="row">姓名：</th>
            <td width="91%"><input type="text" vname="username" vmessage="请输入2-4个字符" value=""></td>
        </tr>
        <tr>
            <th scope="row">年龄：</th>
            <td><input type="text" vname="userage" value="" vmessage="请输入有效年龄(18-80)周岁"></td>
        </tr>
        <tr>
            <th scope="row">手机：</th>
            <td><input type="text" value=""></td>
        </tr>
        <tr>
            <th scope="row"></th>
            <td><input dom="submit" type="submit" value="提交"/></td>
        </tr>
    </table>
</div>

<div style="border:#CCC 1px solid; background-color:#FFFFCC;padding:20px;">
	该Demo用要用来展示Widget: SimpleValidator，表单验证<br/>
	验证规则为：{'rules':{'username':{'required':1,'rangeLength':[1,3]},'userage':{'required':1,'range':[18,80]}},onblur:true}
</div>

</body>
<script type="text/javascript" src="mdf/js/common/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="mdf/js/common/mdf-full.js"></script>
<script type="text/javascript" src="mdf/js/project/project-init.js"></script>
<script type="text/javascript" src="mdf/js/project/language-mapping.js"></script>
<script type="text/javascript" src="mdf/js/project/error-mapping.js"></script>
<script type="text/javascript" src="mdf/js/project/action-mapping.js"></script>
<script type="text/javascript" src="mdf/js/project/validator-form.js"></script>
</html>
